<!--
 * @Author: ChengNan 1429323234@qq.com
 * @Date: 2025-05-30 14:47:49
 * @LastEditors: xupengcheng-web 1429323234@qq.com
 * @LastEditTime: 2025-10-15 21:17:50
 * @FilePath: /index.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>热力图</title>
  <style>
    #cesiumContainer {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }

    .cesium-viewer,
    .cesium-widget,
    canvas,
    .cesium-viewer-cesiumWidgetContainer {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="./Cesium/Cesium.js"></script>
  <script src="./CesiumHeatmapAutoUpdate.js"></script>
</head>

<body>
  <div id="cesiumContainer"></div>

  <script>
    let heatmapInstance = null;
    let Viewer = new Cesium.Viewer("cesiumContainer");
    let heatmapViewer = new Cesium.CustomDataSource('heatmapViewer');
    Viewer.dataSources.add(heatmapViewer);


    function setView(mapData) {
      Viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(+mapData[0].longitude, +mapData[0].latitude, 1000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0
        }
      })
    }



    let mapData = [
      {
        "latitude": "30.278232",
        "id": "p:PERSON:1920385523268399104",
        "longitude": "122.109511"
      },
      {
        "latitude": "30.278224",
        "id": "p:SPECIAL_WORK:1920385523180318720",
        "longitude": "122.109475"
      }
    ]
    initHeatmap(mapData)
    setView(mapData)










    //  cesium 热力图方法(下面方法是核心)
    function getBounds(heatData) {
      let bpoint = []
      for (let item of heatData) {
        bpoint.push(new Cesium.Cartographic(item.x, item.y, 0))
      }
      let bounds = new Cesium.Rectangle.fromCartographicArray(bpoint);
      let getNum = (num, d = 0) => {
        let n1 = String(num).split('.')[0]
        let n2 = String(num).split('.')[1]
        let _n2 = Number('0.' + n2) + (d * 0.01)
        let res = Number(n1) + Number(_n2)
        return res
      }
      let newBounds = {
        north: getNum(bounds.north, +1),    // 北边界（略大于最大纬度）
        south: getNum(bounds.south, -1),    // 南边界（略小于最小纬度）
        east: getNum(bounds.east, +1),    // 东边界（略大于最大经度）
        west: getNum(bounds.west, -1)     // 西边界（略小于最小经度）
      }
      return newBounds
    }
    function removeHeatmap() {
      if (heatmapViewer && heatmapInstance) {
        heatmapViewer.entities.removeAll();
        heatmapInstance = null;
      }
    }
    function initHeatmap(mapData) {
      // 确保Viewer已正确初始化
      if (!heatmapViewer) {
        console.error('地图Viewer未正确初始化');
        return;
      }
      if (!mapData || mapData.length === 0) return;
      try {
        // 1. 预处理数据，确保坐标有效性
        const validData = mapData.filter(item =>
          item.longitude && item.latitude &&
          !isNaN(Number(item.longitude)) &&
          !isNaN(Number(item.latitude))
        );
        if (validData.length === 0) {
          console.warn('没有有效的热力图数据');
          return;
        }
        // 2. 转换为热力图所需格式（添加高度信息）
        const heatmapData = validData.map(item => {
          return {
            id: item.id,
            x: Number(item.longitude),
            y: Number(item.latitude),
            z: Number(item.height || 0), // 添加高度信息（如果有）
            value: item.value || 100
          }
        });
        // 3. 改进边界计算方法
        const bounds = getBounds(heatmapData);
        // 4. 创建热力图实例（确保使用正确的坐标系统）
        if (!heatmapInstance) {
          heatmapInstance = CesiumHeatmap.create(heatmapViewer, bounds, {
            height: 1, // 高度（单位：米）; 默认值是1，【可选】
            radius: 20, // 增大半径（默认根据画布计算，手动设更大值，单位像素） 【可选】
          });
        }
        // 5. 设置热力图数据（使用WGS84坐标系统）
        let valueMin = 0;
        let valueMax = 100;
        heatmapInstance.updateWGS84Data(valueMin, valueMax, heatmapData);
      } catch (error) {
        console.error('热力图初始化失败:', error);
      }
    }
    function updateHeatmap(mapData) {
      let heatmapData = mapData.map(item => {
        return {
          id: item.id,
          x: Number(item.longitude),
          y: Number(item.latitude),
          z: Number(item.height || 0), // 添加高度信息（如果有）
          value: item.value || 100
        }
      });
      const newBounds = getBounds(heatmapData);
      let valueMin = 0;
      let valueMax = 100;
      heatmapInstance.updateWGS84Data(valueMin, valueMax, heatmapData, newBounds);
    }

  </script>
</body>

</html>